<template>
  <div id="Header">
    <div>
    	<div class="left">
    		<span>欢迎，石松岩</span>
    		<span class="iconfont">&#xe600;</span>
    	</div>
    	<div class="right">
    		<span>关于我们</span>
    		<span v-if="show">|</span>
    		<span v-if="show">
    			<span @click="logOut">退出</span>
    			<span class="iconfont">&#xe625;</span>
    		</span>
    	</div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      
    }
  },
  computed:{
  	show(){
  		if(this.$route.path=="/"){
  			return false;
  		}
  		return true;
  	}
  },
  methods:{
  	logOut(){
  		window.sessionStorage.clear();
			this.$message("退出成功");			//提示退出成功
			this.$router.push({path:'/'})
  	}
  },
  created(){
  	
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang='scss'>
	@import "../style/mixin.scss";
	#Header{	
		>div{
			height:30px;
			width:$mainWidth;
			margin:0 auto;
			background: white;
			@include fj();	
			align-items:center;
			font-size:12px;		
			.left{				
				>span{
					margin-right: 20px;
					color:#656565;
					&.iconfont{
						font-size: 16px;
						color:$blue;
					}
				}
			}
			.right{
				>span{
					margin-left: 5px;
					cursor: pointer;
					transition: 0.2s;
					color:#656565;
					&:hover{
						color:red;
					}
					.iconfont{
						font-size: 14px;
						display: inline-block;
						transform: translateY(2px);
					}
				}
			}
		}
	}
</style>
